<template>
  <div>
    <div class="main">
      <!--   上班hour   -->
      <van-row gutter="15" type="flex" v-if="status === 0">
        <van-col span="8" v-for="item in [7,8,9, 'clear',10, 11]">
          <single-key :num="item" @click="onTapNum" v-if="item !== 'clear'"></single-key>
          <button class="key" v-else @click="$emit('clear'); reset()" style="font-size: 18px">清空</button>
        </van-col>
      </van-row>

      <!--   上班/下班min  -->

      <van-row gutter="15" type="flex" v-if="status === 1 || status === 3" v-for="i in 3">
        <van-col span="8" v-for="j in 3">
          <single-key :num="(i - 1) * 3 + j" @click="onTapNum"
                      :disabled="(status === 1 && startMinute.length === 0 && (i - 1) * 3 + j > 5) || (status === 3 && endMinute.length === 0 && (i - 1) * 3 + j > 5)"></single-key>
        </van-col>
      </van-row>
      <van-row gutter="15" type="flex" v-if="status === 1 || status === 3">
        <van-col span="8">
          <button class="key" @click="goToPre">
            <van-icon name="arrow-left"/>
          </button>
        </van-col>
        <van-col span="8">
          <single-key :num="0" @click="onTapNum"></single-key>
        </van-col>
        <van-col span="8">
          <single-key :num="'00'" @click="onTapNum" :disabled="(status === 1 && startMinute.length === 1)||(status === 3 && endMinute.length === 1)"
                      ></single-key>
        </van-col>
      </van-row>

      <!--   下班hour   -->
      <van-row gutter="15" type="flex" v-if="status === 2">
        <van-col span="8" v-for="item in [16,17,18,19,20,21,'back',22,23]">
          <single-key :num="item" @click="onTapNum" v-if="item !=='back'"></single-key>
          <button class="key" @click="goToPre" v-else>
            <van-icon name="arrow-left"/>
          </button>
        </van-col>
      </van-row>

      <!--   结果   -->
      <div class="result" v-if="status === 4">
        <van-row gutter="15" type="flex">
          <van-col span="12">
            <button class="key" @click="goToPre">
              <van-icon name="arrow-left"/>
            </button>
          </van-col>
          <van-col span="12">
            <button class="key" @click="commitResult">
              <van-icon name="success" />
            </button>
          </van-col>
        </van-row>

      </div>

    </div>
  </div>
</template>

<script>
import {Col, Row, Icon} from 'vant';
import SingleKey from './single_key'

export default {
  components: {'van-col': Col, 'van-row': Row, SingleKey, 'van-icon': Icon},
  name: "time_keyboard",
  props: {
    value: ''
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  data() {
    return {
      status: 0,
      startHour: '',
      startMinute: '',
      endHour: '',
      endMinute: '',
    }
  },
  methods: {
    onTapNum(num) {
      if (this.status === 0) {
        this.startHour = num
        this.status++
      } else if (this.status === 1) {
        this.startMinute += num
        if (this.startMinute.length === 2) {
          this.status++
        }
      } else if (this.status === 2) {
        this.endHour = num
        this.status++
      } else if(this.status === 3){
        this.endMinute += num
        if (this.endMinute.length === 2) {
          this.status++
        }
      }
      let result = this.getResult()
      this.$emit('change', result)
    },
    getResult(){
      let str = ''
      if(this.startHour !== ''){
        str += this.formatNumber(this.startHour)
      }
      else{
        str += '_ _'
      }
      str += ' : '
      if(this.startMinute !== ''){
        str += this.startMinute.length === 1 ? (this.startMinute + ' _') : this.startMinute
      }
      else{
        str+= '_ _'
      }
      str += ' ~ '
      if(this.endHour !== ''){
        str += this.formatNumber(this.endHour)
      }
      else{
        str += '_ _'
      }
      str += ' : '
      if(this.endMinute !== ''){
        str += this.endMinute.length === 1 ? (this.endMinute + ' _') : this.endMinute
      }
      else{
        str += '_ _'
      }
      return str

    },
    formatNumber(num){
      num = num.toString()
      return num[1] ? num : '0' + num
    },
    reset() {
      setTimeout(() => {
        this.status = 0
        this.startHour = ''
        this.startMinute = ''
        this.endHour = ''
        this.endMinute = ''
        this.$emit('change', '_ _ : _ _ ~ _ _ : _ _')
      }, 301)
    },
    goToPre(){
      if(this.status === 1){
        if(this.startMinute.length === 1){
          this.startMinute = ''
        }
        else{
          this.startHour = ''
          this.startMinute = ''
          this.status --
        }
      }
      else if(this.status === 2){
        this.startMinute = ''
        this.endHour = ''
        this.status --
      }
      else if(this.status === 3){
        if(this.endMinute.length === 1){
          this.endMinute = ''
        }
        else{
          this.endHour = ''
          this.endMinute = ''
          this.status --
        }
      }
      else if(this.status === 4){
        this.endMinute = ''
        this.status --
      }
      let result = this.getResult()
      this.$emit('change', result)
    },
    commitResult(){
      let result = this.formatNumber(this.startHour) + this.startMinute + this.formatNumber(this.endHour) + this.endMinute
      this.$emit('commit', result)
    }
  },

}
</script>

<style scoped lang="scss">
.main {
  min-height: 240px;
  padding: 20px;
  background: #f2f3f5;
}

.key {
  box-sizing: border-box;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: 28px;
  line-height: 1.5;
  background-color: #fff;
  border-radius: 8px;
  cursor: pointer;
  flex: 1;
  width: 100%;
  border: none;
  user-select: none;
  margin-bottom: 12px;

  &:active {
    background-color: #ebedf0;
  }
}
</style>